<div class="content general-content" id="page-body">
    <div class="contentleft team">
        <h1><?php echo $franchise->name ?></h1>
        <h2>Meet The Team</h2>
        <table>
            <?php foreach ($tearms as $key => $tearm) { ?>
                <?php if ($key % 3 == 0) { ?>
                    <tr>
                    <?php } ?>
                    <td>
                        <img src="<?php echo base_url() . 'img/' . (!empty($tearm->avatar) ? $tearm->avatar : 'avatar/team_nopic.png'); ?>" alt="" class="team" />
                        <h2><?php echo $tearm->person_name ?></h2>
                        <div style="height:74px">
                            <p>
                                <strong><?php echo $tearm->job_title ?></strong><br /> 

                                <?php if (!empty($tearm->phone)) { ?>
                                    <strong>Phone:</strong> <?php echo $tearm->phone ?><br /> 
                                <?php } ?>
                                <?php if (!empty($tearm->mobile)) { ?>
                                    <strong>Mobile:</strong> <?php echo $tearm->mobile ?>
                                <?php } ?>
                            </p>
                        </div>
                        <p>
                            <a href="#" onclick="$('#emailagent-dialog-modal').dialog('open');$('#emailagent_id').val('<?php echo $tearm->id ?>'); return false;" class="orange-block">Email Agent</a>
                        </p>
                    </td>
                    <?php if (($key % 3 == 2) || ($key == (count($tearms) - 1))) { ?>
                    </tr>
                <?php } ?>
            <?php } ?>
        </table>

    </div>
    <div class="contentright team">
        <table>
            <tr>
                <td>
                    <h2><a href="javascript:changeStatus('sold')" class="status active" id="sold">For Sale</a></h2>
                </td>
            </tr>
            <tr>
                <td>
                    <h2><a href="javascript:changeStatus('rentals')" class="status" id="rentals">For Rent</a></h2>
                </td>
            </tr>
            <tr>
                <td>
                    <h2><a href="javascript:changeStatus('leased')" class="status" id="leased">Sold</a></h2> 
                </td>
            </tr>
            <tr>
                <td>
                    <div id="ofice_status" style="height:308px;overflow:hidden" rel="0" status="sold"></div>
                </td>
            </tr>
            <tr>
                <td style="height:24px">
                    <a href="javascript:backoffice()"><img src="<?php echo base_url(); ?>img/arrow-top.png" alt="" style="margin: 6px 0 0 53px;" /></a>
                    <a href="javascript:nextoffice()"><img src="<?php echo base_url(); ?>img/arrow-bottom.png" alt="" style="margin-top: 6px" /></a>
                </td>
            </tr>
        </table>
        
    </div>
    <div class="clearer"></div>

    <div id="emailagent-dialog-modal" title="Email Agent">
        <div>
            <form id="emailagent">
                <div class="showError"></div>
                <table>
                    <tr>
                        <td style="padding-top:8px">
                            your name *
                        </td>
                        <td style="padding-top:8px">
                            <input id="emailagent_id" name="emailagent_id" type="hidden" value="" style="width:256px"/>
                            <input id="emailagent_name" name="emailagent_name" type="text" value="" style="width:256px"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-top:8px">
                            email address *
                        </td>
                        <td style="padding-top:8px">
                            <input id="emailagent_email"  name="emailagent_email" type="text" value="" style="width:256px"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-top:8px">
                            mobile number
                        </td>
                        <td style="padding-top:8px">
                            <input id="emailagent_mobile"  name="emailagent_mobile" type="text" value="" style="width:256px"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align:top; padding-top:8px">
                            message
                        </td>
                        <td style="padding-top:8px">
                            <textarea id="emailagent_message"  name="emailagent_message" style="width:280px; height:96px; resize: none"></textarea>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <script>
        $("#emailagent-dialog-modal").dialog({
            autoOpen: false,
            width: 420,
            height: 346,
            modal: true,
            resizable: false,
            buttons: {
                Submit: function() {
                    var e = $(this);
                    var form_data = $('#emailagent').serialize();
                    //Begin the ajax call
                    $.ajax({
                        url: "<?php echo site_url('offices/emailagent_email') ?>",
                        type: "POST",
                        data: form_data,
                        dataType: "json",
                        cache: false,
                        success: function(json) {
                            var usermessage = json.usermessage;
                            var fielderrors = json.fielderrors;
                            if (usermessage[0] == 'error')
                            {
                                //Show the user the errors.
                                $('#emailagent .showError').html(usermessage[1]);
                                if(usermessage[2] == 1){
                                    e.dialog("close");
                                    $('#error-dialog-modal .showError').html(usermessage[1]);
                                    $('#error-dialog-modal').dialog('open');
                                }else{
                                    $(' #emailagent .showError').show();
                                    $.each(fielderrors, function(id, value) {
                                        $('#'+id).addClass('error');
                                    });
                                }
                                
                            } else {
                                $('#emailagent')[0].reset();
                                $('#emailagent .showError').html('');
                                e.dialog("close");
                                $('#success-dialog-modal .showSuccess').html(usermessage[1]);
                                $('#success-dialog-modal').dialog('open');
                            }
                        }
                    });
                },
                Cancel: function() {
                    $(this).dialog("close");
                }
            }
        });
        
        function get_office(id,type,start,status){
            $.ajax({
                url: "<?php echo site_url('offices/get_office') ?>/"+type+'/'+start+'/<?php echo $franchise->id ?>',
                dataType: "HTML",
                cache: false,
                success: function(data) {
                    if(data){
                        $('#'+id).html(data);
                        $('#'+id).attr('rel',start);
                    }else if (start == 0){
                        $('#'+id).html('');
                    }
                        
                }
            });
        }
        
       
        function changeStatus(status){
            $('#ofice_status').attr('rel',0);
            $('#ofice_status').attr('status',status);
            $('.status').removeClass('active');
            $('#'+status).addClass('active')
            get_office('ofice_status',status,0);
        }
        
        function backoffice(){
            var start = $('#ofice_status').attr('rel');
            var type = $('#ofice_status').attr('status');
            start = parseInt(start);
            if(start > 0){
                start = start -1;
                get_office('ofice_status',type,start);
               
            }
        }
        
        function nextoffice(id,type){
            var start = $('#ofice_status').attr('rel');
            var type = $('#ofice_status').attr('status');
            start = parseInt(start)+1;
            get_office('ofice_status',type,start);
            
        }
        $(document).ready(function(){
            get_office('last_list','listings',0);
            get_office('ofice_status','sold',0);
        })
    </script>

</div>
